<template>
  <div class="total_customer_table">
    <el-table
      ref="table"
      :data="queryTableAllDataList"
      style="width: 100%"
      :cell-style="{ padding: 0, height: '30px' }"
      :header-cell-style="{
        background: '#f4f4f4',
        padding: 0,
        height: '40px',
      }"
      highlight-current-row
      show-summary
      :summary-method="getSummaries"
      :height="checkboxSelectValue ? '70vh' : '74vh'"
    >
      <el-table-column prop="customerName" label="客户简称" sortable>
      </el-table-column>
      <el-table-column prop="customerInput" label="客进" sortable>
      </el-table-column>
      <el-table-column prop="customerOut" label="客退" sortable>
      </el-table-column>
      <el-table-column prop="customerSell" label="客销" sortable>
      </el-table-column>
      <el-table-column prop="customerRepertory" label="客存" sortable>
      </el-table-column>
      <!-- 未知 -->
      <!-- <el-table-column prop="name" label="首进日" sortable> </el-table-column> -->
      <!-- <el-table-column prop="name" label="首销日" sortable> </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    // 父组件传过来的数组表格数据
    queryTableAllDataList: {
      type: Array,
      default() {
        return [];
      },
    },
    // 父组件传过来的多条件查询，是否被点击
    checkboxSelectValue: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        // if判断这里才是能指定合计中的每每一列显示什么内容
        if (index === 0) {
          sums[index] = "合计";
          return;
        }

        // if (index === 10) {
        //   sums[index] = "显示10 ";
        //   return;
        // }
        // if不指定，下面就会自动的操作数据并且合计了，不用手动操作
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // sums[index] += " 元";
          sums[index] += " ";
        } else {
          sums[index] = "0";
        }
      });

      return sums; // 会显示这个数组里面的各个Item,那么想要改变的话，直接改变里面的item值就行
    },
    // 表格的row（行）被单击的时候，触发的函数
    handleTableRowClick(row) {
      console.log(row);
      this.$emit("addImageUrlGiveTatherComponent", row.image, row.typeNumber);
    },
  },
  updated() {
    this.$nextTick(() => {
      this.$refs["table"].doLayout();
    });
  },
};
</script>

<style></style>
